<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>活动详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="css/cui.css" />
	<link rel="stylesheet" href="css/lib.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>

    <!-- 头部 -->
    <section id="hd">
        <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
        <h3>活动详情</h3>
    </section>
    <!-- 头部 end-->

    
    <!-- 主内容 -->
    <section id="bd" class="dn">

        <div class="m-txt6 ">
            <!-- 倒计时 -->
            <div id="clock1" class="m-clock" v-html="count"></div>
            <!-- 倒计时 end-->
            <div class="pic"><img src="img/pic6.jpg" alt=""></div>
            <div class="txt1">
                <h3>{{info.Title}}</h3>
                <span>浏览 {{info.BrowseCount}} 次　报名 {{info.SignedUpCount}} 人</span>
            </div>
            <div class="txt2">
                <p><i style="background-image: url(img/icon22.png);"></i>{{time}}</p>
                <p><i style="background-image: url(img/icon23.png);"></i>{{info.Position}}</p>
                <p><i style="background-image: url(img/icon24.png);"></i>{{info.HostBy}}  主办</p>
            </div>
        </div>
        <div class="m-txt7">
            <h3>活动详情</h3>
            <div v-html="info.Detail">

            </div>
        </div>
        <a :href="'apply.html?id='+id" class="m-btn2">活 动 报 名</a>
    </section>
    <!-- 主内容 end-->

	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/lib.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
    <script src="js/axios-config.js"></script>
    <script>
        var param = parseQueryString(location.search);
        var id=param.activityid;
        var vm=new Vue({
            el:'#bd',
            data:{
                info:{},
                id:id,
                count:''
            },
            computed:{
                time:function () {
                    var start=new Date(this.info.StartTime);
                    var stop=new Date(this.info.StopTime);
                    start=(start.getMonth()+1)+'月'+start.getDate()+'日 '+(start.getHours())+':'+(start.getMinutes());
                    stop=(stop.getMonth()+1)+'月'+stop.getDate()+'日 '+(stop.getHours())+':'+(stop.getMinutes());
                    return start+'~'+stop
                }
            },
            created:function () {
                var _=this;
                axios.activity('/detail',{
                    id:id
                })
                    .then(function (res) {
                        if(res.data.Code===0){
                            res.data.Detail.time=''
                            _.info=res.data.Detail;
                            $("#bd").show();
                            axios.activity('/addbrowse',{
                                id:id
                            })
                            function updateCount() {
                                    var now = new Date().getTime();
                                    var diff = (new Date(_.info.StopTime).getTime() - now) / 1000;
                                    var second = Math.floor(diff % 60);
                                    var minute = Math.floor(diff / 60 % 60);
                                    var hour = Math.floor(diff / 60 / 60 % 24);
                                    var day = Math.floor(diff / 60 / 60 / 24);
                                    _.count = '剩余 <span>' + hour + '</span>时<span>' + minute + '</span>分<span>' + second + '秒</span> 结束';
                                setTimeout(updateCount,1000)
                            }
                            updateCount();
                        }
                    })
            },
            methods:{
                
            }
        })
    </script>


</body>
</html>